<template>
  <div
    id="myBalance"
    :style="{
      borderRadius:styles.circle+'px',
      marginTop:styles.marginTop+'px',
       marginBottom:styles.marginBottom+'px',
        marginLeft:styles.marginLR+'px',
         marginRight:styles.marginLR+'px',}"
  >
    <div class="content" :style="{backgroundColor:styles.colorBg,}">
<!--      <el-image-->
<!--        v-if="!styles.upLoad1.img==''"-->
<!--        class="icons"-->
<!--        style="width: 25px; height: 25px"-->
<!--        :src="styles.upLoad1.img"-->
<!--        fit="cover"-->
<!--      ></el-image>-->
      <div class="hywz">
        <span class="bold" v-if="styles.type==2">我的积分 ***</span>
        <span class="bold" v-else>我的余额 ***</span>
      </div>
      <div class="span">{{styles.upLoad1.text}}</div>
    </div>
    <div class="right">
      <div>
        <el-image
          class="icons-right"
          style="width: 25px; height: 25px;margin-left: 6px;margin-top: 2px"
          :src="img"
          fit="cover"
        ></el-image>
      </div>
      <div class="span2">会员码</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "myBalance",
  data() {
    return {
      img: require("../../../assets/img/hym.png"),
      img2: require("../../../assets/img/right.png"),
    };
  },
  props: ["styles"],
};
</script>

<style lang='less' scoped>
#myBalance {
  position: relative;
  overflow: hidden;
  .content {
    //display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    height: 75px;
    padding: 15px;
    > .icons {
      margin-right: 5px;
    }
    > .span {
      color: #999;
      font-size: 12px;
      margin-top: 5px;
    }
    > .hywz{
      font-size: 16px;
      color: #333;
    }
  }
  .right {
    position: absolute;
    right: 20px;
    top: 12px;
    border-left: 1px solid #F8F8F8;
    padding-left: 10px;
    //display: flex;
    //justify-self: start;
    //align-items: center;
    > .span2 {
      color: #999;
      font-size: 12px;
      margin-top: 3px;
    }
    > .icons-right {
      margin-left: 10px;
    }
  }
  .bold{
    font-weight: bold;
  }
}
</style>
